<template>
    <view class="seach-box" :class="{pr: showFilter}">
        <form action="/" class="seach">
			<mehaotianSearch @search="searchKey" :placeholder="placeholder"></mehaotianSearch>
        </form>
       <slot>
		   <view class="filter_wrap" v-if="showFilter">
			   <view class="visit_time" @click="openPopup"><span>{{title}}</span>
				   <text class="iconfont iconshaixuan"/>
			   </view>
		   </view>
	   </slot>
	</view>
</template>
<script>
import mehaotianSearch from '@/components/App_search.vue'
export default {
	name: 'SeachNav',
	components: {
		mehaotianSearch
	},
	props: {
		title: {
			type: String,
			default: '筛选'
		},
		showFilter: {
			type: Boolean,
			default: true
		},
		placeholder: {
			type: String,
			default: '请输入搜索内容'
		}
	},
	data() {
		return {}
	},
	methods: {
	    // 搜索
		searchKey(val) {
			this.$emit('search', val)
		},
		openPopup() {
			this.$emit('openPopup')
		}
	}
}
</script>

<style lang="scss" scoped>
    .seach-box {
        display: flex;
        align-items: center;
        font-size: 26px;
        color: #666;
        background-color: #fff;
		z-index: 888;
		box-shadow:0px 4px 6px 0px rgba(221,221,221,0.3);
        .seach {
            flex: 1;
		}
		&.pr {
			padding-right: 30px;
			.seach {
            	padding-right: 20px;
			}
		}
    }
	.filter_wrap {
		padding-left: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		color: #666666;
		border-right: 1px;
		& > view {
			padding: 0 5px;
		}
		&::after {
			content: '';
			height: 60px;
			position: absolute;
			background-color: #dddddd;
			width: 1Px;
			left: 0;
			top: 50%;
			transform: translate(0 ,-50%);
		}
	}
</style>
